<template>
	<view class="goodsbox">
		<view class="qisearch">
			<text class="iconfont icon-icon-test12"></text>
			<input @confirm="confirm" v-model.lazy="keyword" @input="$u.throttle(confirm,500)" />
			<view v-if="Object.keys(keyword).length !== 0" class="iconfont icon-icon-test44" @tap="tapsubicon"></view>
		</view>
		<view class="boxscroll">
			<scroll-view scroll-y class="leftscroll">
				<block v-for="item in categories" :key="item.id">
					<view class="leftgoodslistname" :class="currentId == item.id ? 'active' : ''"
						@tap="swichMenu(item.id)">
						{{ item.name }}
					</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y class="rightscroll" @scroll="refscroll" :scroll-top="scrollTop"
				@scrolltolower="scrollToBottom">
				<view class="solriglist">
					<navigator :url="`/pages/goods/detail?id=${book.id}`" class="thumb-box "
						v-for="(book, index) in goodsList" :key="index">
						<image :src="book.cover_url" class="item-menu-image" mode="widthFix"></image>
						<text class="item-menu-name">{{ book.title }}</text>
					</navigator>
				</view>
				<view class="iconfont icon-qudingbu  back-top" v-show="isShow" @tap="TapclickNavback"></view>
			</scroll-view>
		</view>

		`
	</view>
</template>
<script>
	import {
		getGoodsCategory
	} from '@/https/API.js'
	export default {
		data() {
			return {
				keyword: '',
				currentId: null,
				isShow: false,
				scrollTop: 0,
				categories: [],
				goodsList: [],
				page: 1,
				isLastPage: false
			}
		},
		onLoad() {
			this.getGoodsCategory()
		},
		methods: {
			getGoodsCategory() {
				// 整理参数
				const params = {
					page: this.page,
					title: this.keyword,
					category_id: this.currentId
				};
				console.log(this.params);
				getGoodsCategory({
					data: params
				}).then(res => {
					this.categories = res.data.categories
						.slice(0, 5)
						.map(item => {
							return item.children.slice(0, 3);
						})
						.flat(Infinity);
					this.goodsList = [...this.goodsList, ...res.data.goods.data];
					// 判断当前数据是否存在下一页
					this.isLastPage = res.data.goods.next_page_url ? false : true;
				})
			},
			refscroll(e) {
				this.scrollTop = e.detail.scrollTop;
				e.detail.scrollTop > 600 ?
					(this.isShow = true) :
					(this.isShow = false);
			},
			TapclickNavback() {
				this.scrollTop == 0 ? this.scrollTop = 1 : this.scrollTop = 0
			},
			swichMenu(id) {
				// 如果点击当前卡片不进行操作
				if (id == this.currentId) return;
				// 改变当前卡片序号
				this.currentId = id;
				// 清除上次筛选数据缓存
				this.page = 1;
				this.goodsList = [];
				// 调用更新搜索数据
				this.getGoodsCategory();
			},
			scrollToBottom() {
				// 如果未到底页
				if (!this.isLastPage) {
					// 页码加一
					this.page += 1;
					// 再次请求数据
					this.getGoodsCategory()
				} else {
					uni.showToast({
						icon: 'none',
						title: '没数据了',
					});
				}
			},
			// 搜搜
			confirm() {
				// 清除上次筛选数据缓存
				this.page = 1;
				this.goodsList = [];
				// 调用更新搜索数据
				this.getGoodsCategory();
			},
			// 清理
			tapsubicon() {
				this.keyword = '';
			}

		},

	}
</script>
<style lang="scss" scoped>
	.goodsbox {

height: calc(100vh - 100rpx - var(--window-bottom));
	}
	

	.qisearch {
		position: relative;
		height: 100rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 0 40rpx;
		background: linear-gradient(to right, #3388ee, #4db9f1);

		>input {
			background-color: #fff;
			flex: 1;
			border-radius: 180rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			font-size: 28rrpx;
			padding-left: 100rpx;
		}

		.icon-icon-test44 {
			position: absolute;
			right: 80rpx;
		}

		.icon-icon-test12 {
			position: absolute;
			left: 80rpx;
		}
	}

	.back-top {
		height: 80rpx;
		width: 80rpx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
		text-align: center;
		line-height: 80rpx;
		z-index: 99;
		font-size: 34rpx;
	}


	.boxscroll {
		display: flex;
		.leftscroll {
			width: 200rpx;
			text-align: center;
height: calc(100vh - 100rpx - var(--window-bottom));
			.active {
				background-color: #ffffff;
				position: relative;

				&::before {
					content: ' ';
					display: block;
					width: 3px;
					height: 30px;
					background-color: #c00000;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}

			.leftgoodslistname {
				padding: 20rpx 0;
			}
		}

		.rightscroll {
			background-color: #fff;
			height: calc(100vh - 100rpx - var(--window-bottom));
			flex: 1;

			.solriglist {
				display: flex;
				flex-wrap: wrap;

				.thumb-box {
					width: 33.33%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding: 20rpx 40rpx;
					box-sizing: border-box;

				}
			}

			.item-menu-image {
				width: 100%;
			}

			.item-menu-name {
				font-weight: normal;
				margin-top: 20rpx;
				color: $u-main-color;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}
		}
	}
</style>